import { defineComponent } from 'vue';
import { SchemaFormPropsDefine } from '../types';

export default defineComponent({
  name: 'NumberField',
  props: SchemaFormPropsDefine,
  setup(props) {
    const { onChange } = props;
    const handleInput = (e: Event) => {
      const target = e.target as HTMLInputElement;
      const num = Number(target.value);
      if (Number.isNaN(num)) {
        onChange(undefined);
      } else {
        onChange(num);
      }
    };
    return () => {
      const { value } = props;
      return <input type='number' value={value} onInput={handleInput} />;
    };
  },
});
